<template>
	<view class="tarbar">
		
		<view class=".tarbar-list" :style="{
	                background: tabBar.backgroundColor,
	                color: tabBar.color,
	                'border-top': tabBar.position == 'bottom' ? '1rpx solid ' + tabBar.borderStyle : 0,
	                'border-bottom': tabBar.position == 'top' ? '1rpx solid ' + tabBar.borderStyle : 0
	            }">
				<image :src="app_img" style="position: absolute;
			width: 100%;
			top: 0px;
			left: 0;
			z-index: -1;"></image>
			<view class="tarbar-list-ul">
				<view class="tarbar-list-li" v-for="(item, index) in tabBar.list" :key="index" @click.top="setSelected(index)">
					<block>
						<view class="tarbar-list-li-icon">
							<image :src="selected == index ? item.selectedIconPath : item.iconPath" mode=""></image>
						</view>
						<view :style='selected == index?"color:"+tabBar.selectedColor:""' class="tarbar-list-li-name">{{ item.text }}</view>
					</block>
				</view>
			</view>
		</view>
		<!-- 		<block v-if="isShowMask">
			<release-popup @close-mask="closeMask"></release-popup>
		</block> -->
	</view>
</template>

<script>
	export default {
		name:'tab-bar',
		data() {
			return {
				app_img:this.appimg+'/app-img/tabbar.png',
				tabBar: {
					color: '#999999',
					selectedColor: '#FE7F00',
					borderStyle: 'white',
					backgroundColor: '',
					position: 'bottom',
					list: [{
							"pagePath": "pages/index/index",
							"iconPath":"/static/tabr_icon/home.png",
							"selectedIconPath":"/static/tabr_icon/home1.png",
							"text": "首页"
						},
						{
							"pagePath": "pages/sign/sign",
							 "iconPath":"/static/tabr_icon/sign.png",
							 "selectedIconPath":"/static/tabr_icon/sign1.png",
							"text": "签到"
						},
						{
							"pagePath": "pages/attendancerecord/attendancerecord",
							"iconPath":"/static/tabr_icon/record.png",
							"selectedIconPath":"/static/tabr_icon/record1.png",
							"text": "考勤记录"
						},
						{
							"pagePath": "pages/user/user",
							"iconPath":"/static/tabr_icon/user.png",
							"selectedIconPath":"/static/tabr_icon/user1.png",
							"text": "个人中心"
						}
					]
				},
				selected: this.current //当前激活项
			};
		},
		props: {
			current: { 
				type: [Number, String],
				default: 0
			}
		},
		methods: {
			setSelected(index) {
				if (this.selected == index) return
				// this.selected = index
				this.$emit('change', index)
			},
		},
		watch: {
			current: {
				handler(val) { // 
					this.selected = val
					const _this = this
					uni.setNavigationBarTitle({ // 设置顶部bar的标题
						title: _this.tabBar.list[val].text
					})
				},
				immediate: true
			}
		}
	}
</script>

<style scoped>
	.tarbar {
		width: 100%;
		z-index: 9999;
		position: fixed;
	}

	.tarbar-list {
		width: 100%;
		height: 98upx;
		//background: #4d586f;
		position: fixed;
		left: 0;
		bottom: 2rpx;
	}

	.tarbar-list-ul {
		width: 100%;
		height: 100%;
		padding: 0upx 60upx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.tarbar-list-li {
		width: 95rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.tarbar-list-li-icon {
		width: 50upx;
		height: 50upx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.tarbar-list-li-icon image {
		width: 50rpx;
		height: 50rpx;
	}

	.tarbar-list-li-name {
		width: 100%;
		text-align: center;
		line-height: 30upx;
		font-size: 24upx;
		height: 30upx;
	}

	.tarbar-list-li-center {
		width: 100upx;
	}
</style>
